{extend name="@list:list" /}

{block name="style"}
<style>

</style>
{/block}

{block name="body"}

{if isset($table)}
<table class="layui-table layui-form" lay-skin="nob">

    <!-- 表头 -->
    <thead>
    <tr>
        {foreach $table->getHeader() as $label }
        <th>{$label}</th>
        {/foreach}

        <!-- 操作 -->
        {if $table->getActions() }
        <th>操作</th>
        {/if}
    </tr>
    </thead>

    <!-- 主体 -->
    {foreach $table as $index=>$row }
    <tbody>
    <tr data-id="{$row->getRowId()}" data-role="{$row->getRow()['user_role']}">
        {foreach $row as $rowIndex=>$td }
        <td class="align-middle text-sm text-gray-600">{$td}</td>
        {/foreach}

        <!-- 操作 -->
        {if $row->getActions() }
        <td>
            {$row->getActions()}
        </td>
        {/if}
    </tr>
    </tbody>
    {/foreach}
</table>
{/if}


<div id="set-role-select" style="display: none;padding: 30px 15px 60px 15px;">
    <div class="layui-form">
        <div class="layui-form-item">
            {foreach $roles as $role=>$title}
            <input type="checkbox" lay-filter="role_input" name="role" value="{$role}" title="{$title}"
                   lay-skin="primary">
            {/foreach}
        </div>
    </div>
</div>


{/block}


{block name="body_script"}
<script>

    var $, layer;


    //每次打开弹窗设置默认值
    function setRoleDefault(btn, form) {
        let spans = $(btn).closest('tr').find('.roles-span');
        if (spans.length) {
            spans.each(function () {
                let role = $(this).data('role');
                $('input[name=role]').each(function () {
                    if ($(this).val() === role) {
                        $(this)[0].checked = true;
                    }
                });
            });
        } else {
            $('input[name=role]').each(function () {
                $(this)[0].checked = false;
            });
        }
        form.render('checkbox'); //刷新select选择框渲染
    }

    // 获取用户选中的权限
    function getUserSelectRole() {
        let val = '';
        $('input[name=role]').each(function () {
            if ($(this)[0].checked) {
                val += $(this).val() + ',';
            }
        });
        return val;
    }

    layui.use(['element', 'layer', 'jquery', 'form'], function () {
        let element = layui.element, form = layui.form;
        layer = layui.layer;
        $ = layui.jquery;


        $('.set_role').click(function () {
            // 获取用户ID
            let id = $(this).data('id');

            //每次打开弹窗设置默认值
            setRoleDefault($(this), form);

            //打开弹窗
            layer.open({
                type: 1,
                title: '设置权限',
                content: $('#set-role-select'),
                btn: ['设置', '关闭'],
                yes: function () {
                    //提交到后台
                    $.post('{:url("set_role")}', {
                        id: id,
                        roles: getUserSelectRole(),
                    }, res => {
                        if (res.code) {
                            layer.msg('操作成功', {icon: 1});
                            window.location.reload();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    })
                }
            });
        });

    });

</script>
{/block}





